import React, { Component } from "react";
import { Container } from "./style";
import { useState } from "react";
import {
  Table,
  Input,
  InputNumber,
  Popconfirm,
  Form,
  Modal,
  Button,
} from "antd";

// 表单
const originData = [];
// import connect from './connect'
// @connect
for (let i = 1; i < 30; i++) {
  originData.push({
    key: i.toString(),
    num: `${i}`,
    name: `黑色签字笔(编码00${i})`,
    type: `办公用品`,
    address: `得力`,
    zhi: `只`,
    xinghao: `${i * 20 - 11}k`,
    code: `${(i + 9) * 20 - 7}`,
  });
}

const EditableCell = ({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}) => {
  const inputNode = inputType === "number" ? <InputNumber /> : <Input />;
  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{
            margin: 0,
          }}
          rules={[
            {
              required: true,
              message: `Please Input ${title}!`,
            },
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : (
          children
        )}
    </td>
  );
};

const Index = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState(originData);
  const [editingKey, setEditingKey] = useState("");

  const isEditing = (record) => record.key === editingKey;

  const edit = (record) => {
    form.setFieldsValue({
      num: "",
      name: "",
      type: "",
      address: "",
      zhi: "",
      xinghao: "",
      code: "",
      ...record,
    });
    setEditingKey(record.key);
  };

  const cancel = () => {
    setEditingKey("");
  };

  const save = async (key) => {
    try {
      const row = await form.validateFields();
      const newData = [...data];
      const index = newData.findIndex((item) => key === item.key);

      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...row });
        setData(newData);
        setEditingKey("");
      } else {
        newData.push(row);
        setData(newData);
        setEditingKey("");
      }
    } catch (errInfo) {
      console.log("Validate Failed:", errInfo);
    }
  };

  const columns = [
    {
      title: "序号",
      dataIndex: "num",
      editable: true,
    },
    {
      title: "物品名称",
      dataIndex: "name",
      editable: true,
    },
    {
      title: "物品分类",
      dataIndex: "type",
      editable: true,
    },
    {
      title: "品牌",
      dataIndex: "address",
      editable: true,
    },
    {
      title: "规格/型号",
      dataIndex: "xinghao",
      editable: true,
    },
    {
      title: "单位",
      dataIndex: "zhi",
      editable: true,
    },
    {
      title: "最低库存",
      dataIndex: "code",
      editable: true,
    },
    {
      title: "操作",
      dataIndex: "operation",
      render: (_, record) => {
        const editable = isEditing(record);
        return editable ? (
          <span>
            <a
              href="javascript:;"
              onClick={() => save(record.key)}
              style={{
                marginRight: 8,
                color: "red",
              }}
            >
              确定
            </a>
            <Popconfirm title="确认取消?" onConfirm={cancel}>
              <a>取消</a>
            </Popconfirm>
          </span>
        ) : (
            <a disabled={editingKey !== ""} onClick={() => edit(record)}>
              编辑
            </a>
          );
      },
    },
  ];
  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }

    return {
      ...col,
      onCell: (record) => ({
        record,
        inputType: col.dataIndex === "age" ? "number" : "text",
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <Container>
      <div className="header">
        <ul className="left">
          <Button type="primary" onClick={showModal}>
            物品档案
          </Button>
          <Modal
            title="Basic Modal"
            visible={isModalVisible}
            onOk={handleOk}
            onCancel={handleCancel}
            
          >
             <div>
                  <p>物品名称: <Input placeholder="请输入物品名称" /></p>
                  <p>物品编码: <Input placeholder="请输入物品编码" /></p>
                  <p>品牌: <Input placeholder="请输入品牌" /></p>
                  <p>单位: <Input placeholder="请输入单位" /></p>
                  <p>规格/型号: <Input placeholder="请输入规格/型号"/></p>
                </div>
          </Modal>
        </ul>
        <ul className="right">
          <li>
            <Input placeholder="物品名称" style={{ width: 150 }} />
          </li>
          <li>
            <Button type="primary">查询</Button>
          </li>
        </ul>
      </div>
      <div className="main">
        <Form form={form} component={false}>
          <Table
            components={{
              body: {
                cell: EditableCell,
              },
            }}
            bordered
            dataSource={data}
            columns={mergedColumns}
            rowClassName="editable-row"
            pagination={{
              onChange: cancel,
            }}
          />
        </Form>
      </div>
    </Container>
  );
};
export default Index;
